<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/13
  Time: 10:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../admin/commons/header.jsp"%>
<style>
    .pagination {
        margin-top: 0;
        margin-bottom: 0;
    }
</style>
<table id="adminUserDatatable" class="table table-bordered table-striped"></table>

<div id="adminUserTableToolbar">
    <button class="btn btn-success" onclick="showAddUserModal()">添加</button>
</div>

<div class="modal" id="addUserModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryAddUserModal()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">添加用户</h3>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="imageServerPath">
                    <div class="form-group">
                        <label for="userName">账号</label>
                        <input class="form-control" autocomplete="off" id="userName">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input class="form-control" autocomplete="off" id="password">
                    </div>
                    <div class="form-group">
                        <label for="state">启用</label>
                        <select class="form-control" id="state">
                            <option value="1" selected>是</option>
                            <option value="0" >否</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="adminUserName">是否为管理员</label>
                        <select class="form-control" id="adminUserName">
                            <option value="1" >是</option>
                            <option value="0" selected>否</option>
                        </select>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button onclick="destoryAddUserModal()" class="btn btn-danger">取消</button>
                <button class="btn btn-success" onclick="addUser()">确认</button>
            </div>
        </div>
    </div>
</div>
</div>
<%@ include file="../admin/commons/footer.jsp"%>

<script>
    /**
     * {
     *           "total": 23,
     *           "rows": [{type: '', }, {}, {}]
     *       }
     */
    $('#adminUserDatatable').bootstrapTable({
        url: '${pageContext.servletContext.contextPath}/servlet/endUser?method=showList',
        method: 'GET',
       // data:{method:'showList'},
        columns: [
            // field是返回rows中每个对象的属性名
            {title: '账号', field: 'endName', align: 'center'},
            {title: '密码', field: 'endPassword', align: 'center'},
            {title: '状态', field: 'state', align: 'center', formatter: formatState},
            {title: '超级用户', field: 'adminUser', align: 'center',formatter: formatAdminUser},
            {title: '操作',align:'center',formatter:addProcessBtn}
        ],
        /**
         * 决定了在哪边分页：client server, 两种不同的配置决定了服务器端返回的数据格式。
         *  client分页, 服务器端返回的数据  [{}, {}, {}]
         *  server端分页，服务器端返回的数据：{rows:[{}, {}], total: 23}
         */
        sidePagination: 'server',
        pagination: true, //表示使用分页
        toolbar: '#adminUserTableToolbar'  //设置工具条
    })



    // 格式化用户的状态
    function formatState(value) {
        if(value== 1) {
            return '<span class="label label-success">启用</span>'
        }
        return '<span class="label label-warning">禁用</span>'
    }

    // 格式化用户是否为管理员的状态
    function formatAdminUser(value) {
        if(value == 1) {
            return '<span class="label label-success">是</span>'
        }
        return '<span class="label label-warning">否</span>'
    }

    // 添加操作按钮
    function addProcessBtn(value, row) {
        var endUserId = row.id;
        var btn ="";
        if (row.state==1){
            btn =btn+ '<button onclick="changeUser(' + endUserId + ',0)" class="btn btn-danger btn-xs">禁用账户</button>&nbsp; &nbsp;'
        }else{
            btn =btn + '<button onclick="changeUser(' + endUserId + ',1)" class="btn btn-success btn-xs">启用账户</button>&nbsp; &nbsp;'
        }

        if (row.adminUser==1){
            btn =btn+ '<button onclick="changeAdminUser(' + endUserId + ',0)" class="btn btn-danger btn-xs">禁用管理员</button>'
        }else{
            btn =btn + '<button onclick="changeAdminUser(' + endUserId + ',1)" class="btn btn-success btn-xs">启用管理员</button>'
        }
        return btn;
    }


    // 改变用户状态
    function changeUser(userId,userState) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/servlet/endUser',
            data: {userId: userId,userState:userState,method:"stateUser"},
            dataType: 'json',
            type: 'post',
            success: function(datas) {
                // 表示删除成功，更新表格
                if(datas.code > 0) {
                    $('#adminUserDatatable').bootstrapTable('refresh'); //刷新页面数据
                }else { // 修改失败，给用户一个提示
                    showErrorBox('修改失败, 请联系管理员.')
                }
            }
        })
    }


    // 改变用户权限
    function changeAdminUser(userId,adminUser) {
        $.ajax({
            url: '${pageContext.servletContext.contextPath}/servlet/endUser',
            data: {userId: userId,adminUser:adminUser,method:"adminUser"},
            dataType: 'json',
            type: 'post',
            success: function(datas) {
                // 表示删除成功，更新表格
                if(datas.code > 0) {
                    $('#adminUserDatatable').bootstrapTable('refresh');
                }else { // 修改失败，给用户一个提示
                    showErrorBox('修改失败, 请联系管理员.')
                }
            }
        })
    }
    /**
     * 展示添加的模态框
     *   1. 首先将所有种类查出来，渲染在模态框中的种类下拉列表中
     *   2. 显示模态框
     */
    function showAddUserModal() {
        var items = $('#items');
        items.empty(); //清空种类的下拉列表
        $('#addUserModal').modal('show');
    }

    // 隐藏模态框
    function destoryAddUserModal() {
        resetModal();
        $('#addUserModal').modal('hide');
    }

    /**
     * 上传展示图：
     *    1.在选择图片旁边的那个输入框中显示文件的名字；
     *    2.上传图片。
     *    3.回显图片。
     */
    function uploadDispalyImage(fileTag) {
        var item = $('#items').val(); //取种类的值，目的是上传的文件放在哪个目录下

        var itemAlias = item.split('#')[1];

        var displayImage = fileTag.files[0];
        // console.log(displayImage.name)  //文件的名字，在很多网站中要去判断文件的格式是否正确，要通过后缀来判断
        // console.log(displayImage.size); // 文件的大小，单位是字节，如果要判断多少 M, size / (1024 * 1024) 结果单位就位M
        var name = displayImage.name;

        $('#append-small-btn').val(name);

        var formData = new FormData();
        formData.append('displayImage', displayImage);
        formData.append('itemAlias', itemAlias);
        formData.append('method', 'uploadDisplayImage')

        $.ajax({
            url: '${pageContext.servletContext.contextPath}/servlet/admin-goods',
            type: 'post',
            dataType: 'json',
            data: formData,
            /**
             * 内容类型。默认值：application/x-www-form-urlencoded;
             * false表示不设置，将FormData原封不动的直接提价服务器端
             */
            contentType: false,
            /**
             * processData 处理数据， 例如get请求，会将data中的数据，name=张三&password=125,
             * 对于FormData包含文件，此处要为false, 禁止转换
             */
            processData: false,
            success: function(_data) {
                // {"filePath":"mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg","imageUrl":"http://localhost/mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg"}
                $('#preDisplayImage').prop('src', _data.imageUrl);  //回显图片
                $('#imageServerPath').val(_data.filePath);
            }
        })
    }

    // 关闭模态框的时候，重置所有的信息
    function resetModal() {
        $('#userName').val('');
        $('#password').val('');
        $('#items').empty();
        $('#state option[value="0"]').remove();
        $('#state option[value="1"]').attr("selected",true);
        $('#adminUserName option[value="0"]').attr("selected",true);
        $('#adminUserName option[value="1"]').remove();

      }

      //添加用户

    function addUser(){
        var userName =  $("#userName").val();
        var password =  $("#password").val();
        var state =$("#state option:selected").val();
        var addminUserName =$("#adminUserName option:selected").val();
        $.ajax({
            url:'${pageContext.servletContext.contextPath}/servlet/endUser',
            type:'post',
            dataType:'json',
            data:{userName:userName,password:password,state:state,addminUserName,addminUserName,method:"addUser"},
            success: function (datas) {
                if (datas.code>0){

                    destoryAddUserModal();  //关闭添加模态框
                    $('#adminUserDatatable').bootstrapTable('refresh');
                    resetModal();//清空添加用户数据
                    showErrorBox(datas.msg,1);

                }else {
                    showErrorBox(datas.msg,0);
                }
            }

        })
    }

</script>